<template>
  <div class="input-add">
    <input type="text" v-model="todoContent" @keyup.enter="emitTodoAdd" />
    <button @click="emitTodoAdd">
      <i class="plus"></i>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    tid: Number
  },
  data() {
    return {
      todoContent: ""
    };
  },
  methods: {
    emitTodoAdd() {
      this.$emit("add-todo", {
        tid: this.tid,
        value: this.todoContent,
        completed: false
      });
      this.todoContent = "";
    }
  }
};
</script>

<style lang="scss">
.input-add {
  display: flex;
  align-items: center;
  position: relative;

  input {
    width: 100%;
    padding: 16px 52px 16px 18px;
    border: none;
    outline: none;
    border-radius: 48px;
    box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.08);
    font-size: 16px;
    color: #626262;
  }

  button {
    width: 46px;
    height: 46px;
    background: linear-gradient(to right, #c0a5f3, #7f95f7);
    border-radius: 50%;
    border: none;
    outline: none;

    position: absolute;
    right: 0;
    cursor: pointer;

    .plus {
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
      background-size: 50% 2px, 2px 50%;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
}
</style>
